<template>
  <div>
    <el-collapse accordion>
      <el-collapse-item>
        <div slot="title" class="wz">! 温馨提示</div>
        <div class="box_1">
          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
        </div>
        <div class="box_1">
          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
        </div>
      </el-collapse-item>
    </el-collapse>

    <div class="box_3">
    <el-button type="primary" @click="tianqwe()" class="btn_1">添 加</el-button>
    </div>
    <div class="box_4">
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="ID" width="100vw">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column label="发布人" width="100vw">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column label="内容" width="250vw">
          <template slot-scope="scope">
            <span class="neirong">{{ scope.row.contents }}</span>
          </template>
        </el-table-column>

        <el-table-column label="标题" width="150vw">
          <template slot-scope="scope">
            <span>{{ scope.row.titles }}</span>
          </template>
        </el-table-column>

        <el-table-column label="时间" width="200vw">
          <template slot-scope="scope">
            <span>{{ scope.row.cretatime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100vw">
          <template slot-scope="scope">
            <span>{{ scope.row.type ==1?'娱乐': scope.row.type == 2 ?'军事' : '体育'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="点赞" width="100vw">
          <template slot-scope="scope">
            <span>{{ scope.row.num }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="success"
              @click="handleEdit(scope.row.id)"
              >点赞</el-button
            >
            <el-button type="primary" @click="detail(scope.row.id)"
              >详情</el-button
            >    
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="boxfyq">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-size="queryInfo.pagesize"
          :page-sizes="[1, 2, 5, 10]"
          layout="total, sizes, prev, pager, next ,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <div style="height:1vw;"></div>
    </div>
 <!-- 详情弹出框 -->
    <el-dialog title="详情" :visible.sync="editVisibleqq" width="30%">
          <div class="box_7"><span class="spou">ID</span> {{are.id}}</div>
          <div class="box_7"><span class="spou">发布人</span>{{are.username}}</div>
          <div class="box_7"><span class="spou">状态</span> {{are.type==1?'娱乐': are.type == 2 ?'军事' : '体育'}}</div>
          <div class="box_7"><span class="spou">内容</span> {{are.contents}}</div>
          <div class="box_7"><span class="spou">上传时间</span> {{are.cretatime}}</div>
          <div class="box_7"><span class="spou">标题</span> {{are.scope}}</div>
          <div class="box_7"><span class="spou">点赞</span> {{are.num}}</div>
      </el-dialog>
      <!-- 添加弹出框 -->
    <el-dialog title="详情" :visible.sync="editVisible" width="30%">
    
        <el-input
          type="textarea"
          style="width: 25vw"
          :rows="2"
          placeholder="请输入新闻的内容"
          v-model="textarea"
        ></el-input>
        <br />
        <br />
        <el-input
          placeholder="请输入新闻的标题"
          style="width: 25vw"
          v-model="input"
          clearable
        ></el-input>
        <br />
        <br />
        <el-input
          placeholder="请输入新闻时间"
          style="width: 25vw"
          v-model="input_one"
          clearable
        ></el-input>
        <br />
        <br />
        <el-input
          placeholder="请输入用户名昵称"
          style="width: 25vw"
          v-model="name"
          clearable
        ></el-input>
        <br />
        <br />
        <template class="dan">
          <el-radio v-model="radio" label="1">娱乐</el-radio>
          <el-radio v-model="radio" label="2">军事</el-radio>
          <el-radio v-model="radio" label="3">体育</el-radio>
        </template>
        <br />
        <br />
        <el-input
          placeholder="请输入点赞数量"
          style="width: 25vw"
          v-model="num"
          clearable
        ></el-input>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false" type="warning"
            >取 消</el-button
          >
          <el-button type="primary" @click="ji()">添 加</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import {dianzan} from '../feng'
export default {
  data() {
    return {
        editVisibleqq:false,
        editVisible:false,
         // 总条数
      total: 0,
      //参数
      queryInfo: {
        query: "",
        // 当前页数
        pagenum: 1,
        // 显示一页多少条数据
        pagesize: 1,
      },
      tableData: [],
      pan: 0,
      are: {},
      pan_one: 1,
      textarea: "",
      input: "",
      input_one: "",
      name: "",
      radio: "1",
      num: "",
    };
  },
  mounted() {
    this.add();
  },
  methods: {
    tianqwe(){
        this.editVisible = true;
    },
    add() {
      let add = {
        page: this.queryInfo.pagenum,
        pagelimit: this.queryInfo.pagesize,
      };
      dianzan(add).then((res) => {
        console.log(res.data.data);
        this.total = res.data.pagecount;
        this.tableData = res.data.data;
      });
    },
    handleSizeChange(newsize) {
      //这里conso 选中第几页 最新的值
      console.log(newsize);
      //最新的条数（newsize）赋值给 动态的 pagesie
      this.queryInfo.pagesize = newsize;
      //获取到最新一页显示的数据  重新发送axios请求 这里是封装好的请求方法
      this.add();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      //把最新的页码（newPage）赋值给 动态的 pagenum
      this.queryInfo.pagenum = newPage;
      //获取到最新显示的页码值  重新发送axios请求 这里是封装好的请求方法
      this.add();
    },
    handleEdit(i) {
      let add = {
        id: i,
      };
      this.$apiGet(
        "https://goods.zzgoodqc.cn/index.php/index/News/addNum",
        add
      ).then((red) => {
        console.log(red);
      });
      this.add();
    },
    handleDelete(i) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          let add = {
            id: i,
          };
          this.$apiGet(
            "https://goods.zzgoodqc.cn/index.php/index/News/delNews",
            add
          ).then((red) => {
            console.log(red);
            this.add();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    detail(i) {
        this.editVisibleqq = true;
      let add = {
        id: i,
      };
      this.$apiPost(
        "https://goods.zzgoodqc.cn/index.php/index/News/getNewsByid",
        add
      ).then((res) => {
        this.are = res.data;
      });
    },
    ji() {
      let add = {
        contents: this.textarea,
        titles: this.input,
        cretatime: this.input_one,
        username: this.name,
        type: this.radio,
        num: this.num,
      };
      this.$apiGet(
        "https://goods.zzgoodqc.cn/index.php/index/News/addNews",
        add
      ).then((red) => {
        console.log(red.msg);
        this.$message({
          type: "success",
          message: red.msg,
        });
        this.add;
      });
    },
  },
};
</script>

<style scoped>
.box_1{
    margin-left: 1vw;
}
.wz {
  margin-left: 1vw;
}
.box_4 {
  background: #fff;
  margin-top: 1vw;
}
.btn_1{
    margin: 1vw;
}
.box_3{
    width: 100%;
    height: 5vw;
    background: #fff;
    margin-bottom: 1vw;
}
.boxfyq {
  margin-top: 1vw;
}
.neirong{
text-overflow:ellipsis;
z-index:-1;
display:-webkit-box;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
.box_shan {
  width: 50vw;
  height: 60vh;
  background: #fff;
  margin: auto;
  text-align: center;
  margin-top: 20vh;
}

.tan_one {
  width: 5vw;
  height: 5vh;
  margin-top: 3vh;
}

.box_tow {
  width: 50vw;
  height: 40vh;
  background: #fff;
  margin: auto;
  text-align: center;
  margin-top: 30vh;
}

.box_one {
  width: 100%;
  height: 99vh;
  background: rgba(33, 30, 30, 0.8);
  position: absolute;
  top: 0px;
  left: 0px;
}

.tan {
  width: 10vw;
  height: 5vh;
  margin-top: 3vh;
  margin-bottom: 3vh;
}
</style>